import { Button, Card, List, Modal, Space } from "antd";
import { AnalyseList } from "./analyse";
import { min_app_shell } from '@linksaas-minapp/api';

interface AnalyseListModalProps {
    flagList: string[];
    onCancel: () => void;
    onSelect: (flag: string) => void;
}

export default function AnalyseListModal(props: AnalyseListModalProps) {
    return (
        <Modal title="增加分析器" open
            width="calc(100vw - 200px)"
            footer={null} bodyStyle={{ height: "calc(100vh - 200px)", overflowY: "auto" }}
            onCancel={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onCancel();
            }}>
            <List rowKey="flag" dataSource={AnalyseList.filter(item => !props.flagList.includes(item.flag))} renderItem={item => (
                <List.Item key={item.flag}>
                    <Card title={<span>{item.nameEn}({item.nameCn})</span>} bordered={false}>
                        <p>{item.descCn}</p>
                        <p>{item.descEn}</p>
                        <div style={{ display: "flex", justifyContent: "flex-end" }}>
                            <Space>
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    min_app_shell.openBrowser(item.url);
                                }}>查看详情</Button>
                                <Button type="primary" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    props.onSelect(item.flag);
                                }}>使用分析器</Button>
                            </Space>
                        </div>
                    </Card>
                </List.Item>
            )} />
        </Modal>
    );
}